import React from 'react';
import { useState, useEffect } from 'react'
import type { FC } from 'react';
import request from '../../api/axios'
import { useNavigate } from 'react-router-dom'

const Symptom: FC = ({ }) => {
  const [departmentId, setDepartmentId] = useState<number | string | undefined>(undefined);
  const [department, setDepartment] = useState<any[]>([]);
  const [rightData, setRightData] = useState<any[]>([]);
  const navigate = useNavigate();
  const getData = async () => {
    const departmentData = await request.get("/api/health/share/knowledgeBase/v1/findDepartment")
    setDepartment(departmentData?.data?.result || [])
  }
  const getRightData = async () => {
    const data = await request.get(`/api/health/share/knowledgeBase/v1/findDiseaseCategory?departmentId=${departmentId}`)
    setRightData(data?.data?.result || [])

  }
  useEffect(() => {
    setDepartmentId(department[0]?.id || undefined)
  }, [department])
  useEffect(() => {
    getData()
  }, []);
  useEffect(() => {
    getRightData()
  }, [departmentId])
  return (
    <div className="symptom-container">
      <div className="symptom-left">
        {
          department.map((item, index) => {
            return <div onClick={() => {
              setDepartmentId(item.id)
            }} className="symptom-left-item" style={{ background: `${item.id === departmentId ? "#fff" : ""}` }} key={index}>
              {item.departmentName}
            </div>
          })
        }
      </div>
      <div className="symptom-right">
        {
          rightData?.length ? rightData.map((item, index) => {
            return <div key={index} style={{ width: `${item.name.length > 10 ? '80%' : "40%"}` }}
              onClick={() => navigate(`/symptomDetail?id=${item.id}&name=${encodeURIComponent(item.name)}`)}
            >{item.name}</div>
          }) : []
        }
      </div>
    </div>
  );
};

export default Symptom;